<!--
 * @Description: 结算设置详情
 * @Author: py
 * @Date: 2024-12-13
-->
<script setup lang="ts" name="settle-detail">
import type { VxeGridProps } from 'vxe-table'
import { formatTime } from '@fl/utils'

import { settingDetailsApi } from '@fl/api/charge-settle'

import { useDicts } from './hooks/use-dicts'

const { getDictLabel } = useDicts()

const { query } = useRoute()
const { id } = query

const formRef = ref()
const initialForm = {
    settlementType: '1',
    effectiveDate: '',
    vendorName: '',
    settlementRatio: 0,
    operatorName: '城服集团',
    ratioType: '1',
}
const formValues = ref({ ...initialForm })

// 阶梯结算比例表单配置
const rateGridOptions = reactive<VxeGridProps>({
    border: 'inner',
    columns: [
        { title: '序号', type: 'seq', width: 60 },
        { slots: { default: 'electRange' }, title: '电量区间' },
        { slots: { default: 'settleRate' }, title: '结算比例(%)' },
    ],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    maxHeight: 360,
    minHeight: 60,
    size: 'medium',
})

type RateItem = {
    electricEnd: null | number
    electricStart: null | number
    id: string
    rateValidateMessage: string
    rateValidateState: string
    settleRatio: null | number
    validateMessage: string
    validateState: string
}
// 阶梯结算比例表单数据
const rateList = ref<RateItem[]>([])

function formatSettleType({ cellValue }) {
    return getDictLabel('oBusinessType', cellValue)
}

function formatSettleRate({ row, cellValue }) {
    // 1 固定比例; 2 阶梯式比例
    if (row.ratioType === 1) {
        // return cellValue === 0 ? '0%' : `${(cellValue * 100).toFixed(2)}%`
        return `${cellValue}%`
    }
    else {
        const settlementRatioList = row.settlementRatioList
        if (settlementRatioList) {
            return settlementRatioList.reduce((acc, curRatioInfos, index) => {
                const { chargeMin, chargeMax, settlementRatio } = curRatioInfos
                const elecRange = `${chargeMin}-${chargeMax}`
                const settleRuleItem = `${index + 1}, ${elecRange}, ${settlementRatio}%`
                acc = `${acc + settleRuleItem}\n`
                return acc
            }, '')
        }
        else {
            return '-'
        }
    }
}

function formatDate({ cellValue }) {
    return formatTime(cellValue, 'yyyy-MM-dd')
}

// 表单配置
const detailsGridOptions = reactive<VxeGridProps>({
    border: 'inner',
    columns: [
        { title: '序号', type: 'seq', width: 60 },
        { field: 'operatorName', title: '运营商名称' },
        { field: 'settlementType', formatter: formatSettleType, title: '结算业务类型' },
        { field: 'vendorName', title: '合作商名称' },
        { field: 'ratioType', formatter: ({ cellValue }) => getDictLabel('oRateType', cellValue), title: '结算比例类型' },
        { field: 'settlementRatio', formatter: formatSettleRate, title: '结算比例' },
        { field: 'effectiveDate', formatter: formatDate, title: '生效日期' },
        { field: 'deactivateDate', title: '停用日期' },
    ],
    data: [],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    loading: false,
    minHeight: 60,
    maxHeight: 360,
    size: 'medium',
})

const isFormLoading = ref(false)
// 获取表单详情信息-回显
function getFormDetails() {
    isFormLoading.value = true
    settingDetailsApi(id).then((data) => {
        const {
            settlementType,
            effectiveDate,
            vendorName,
            settlementRatio,
            operatorName,
            ratioType,
            settlementRatioList,
        } = data
        formValues.value = {
            settlementType: String(settlementType),
            effectiveDate: formatTime(effectiveDate, 'yyyy-MM-dd'),
            vendorName,
            settlementRatio,
            operatorName,
            ratioType: String(ratioType),
        }

        rateList.value = settlementRatioList?.map((item) => {
            return {
                electricEnd: item.chargeMax,
                electricStart: item.chargeMin,
                id: item.id,
                rateValidateMessage: '',
                rateValidateState: 'success',
                settleRatio: item.settlementRatio,
                settlementSettingId: item.settlementSettingId,
                validateMessage: '',
                validateState: 'success',
            }
        })

        detailsGridOptions.data = data.historySettingList || []
    }).finally(() => {
        isFormLoading.value = false
    })
}

getFormDetails()
</script>

<template>
    <el-card shadow="never"
             class="border-none"
    >
        <el-button class="mb-20"
                   @click="$router.back"
        >
            返回列表
        </el-button>

        <h2 class="module-title pl-24">
            当前结算设置
        </h2>

        <el-form ref="formRef"
                 :model="formValues"
                 label-width="auto"
        >
            <el-row :gutter="16"
                    class="px-24"
            >
                <el-col :span="8">
                    <el-form-item label="运营商名称："
                                  class="form-item-display"
                    >
                        {{ formValues.operatorName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="结算业务类型："
                                  class="form-item-display"
                    >
                        {{ getDictLabel('oBusinessType', formValues.settlementType) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="合作商名称："
                                  class="form-item-display"
                    >
                        {{ formValues.vendorName }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="16"
                    class="px-24"
            >
                <el-col :span="8">
                    <el-form-item label="结算比例类型："
                                  class="form-item-display"
                    >
                        {{ getDictLabel('oRateType', formValues.ratioType) }}
                    </el-form-item>
                </el-col>

                <el-col v-if="formValues.ratioType === '1'"
                        :span="8"
                >
                    <el-form-item label="结算比例："
                                  class="form-item-display"
                    >
                        {{ formValues.settlementRatio }}%
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="生效日期："
                                  class="form-item-display"
                    >
                        {{ formValues.effectiveDate }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row v-if="formValues.ratioType === '2'"
                    class="px-24"
            >
                <el-col :span="8">
                    <vxe-grid class="w-full"
                              v-bind="rateGridOptions"
                              :data="rateList"
                    >
                        <template #top>
                            <p class="py-6">
                                结算比例
                            </p>
                        </template>

                        <template #electRange="{ row }">
                            <span>{{ row.electricStart }}</span>

                            <span class="px-4">-</span>

                            <span>{{ row.electricEnd }}</span>
                        </template>

                        <template #settleRate="{ row }">
                            {{ row.settleRatio }}
                        </template>
                    </vxe-grid>
                </el-col>
            </el-row>
        </el-form>

        <div class="module-divider" />

        <h2 class="module-title pl-24">
            历史结算设置
        </h2>

        <div class="px-24">
            <vxe-grid v-bind="detailsGridOptions" />
        </div>
    </el-card>
</template>

<style lang="less" scoped>
@import '../custom.less';
</style>
